<!-- 考生编辑弹窗 -->
<template>
  <el-dialog width="750px" :visible="visible" :lock-scroll="false" :destroy-on-close="true" custom-class="ele-dialog-form"
    :title="isUpdate ? '修改考生信息' : '添加考生信息'" @update:visible="updateVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="考生照片:">
        <uploadImage :limit="1" v-model="form.avatar"></uploadImage>
      </el-form-item>
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="考生姓名:" prop="realname">
            <el-input clearable :maxlength="20" v-model="form.realname" placeholder="请输入考生姓名" />
          </el-form-item>
          <el-form-item label="准考证号:" prop="examinee_number">
            <el-input clearable :maxlength="20" :disabled="isUpdate" v-model="form.examinee_number"
              placeholder="请输入准考证号" />
          </el-form-item>
          <el-form-item label="性别:" prop="gender">
            <el-select clearable class="ele-block" v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
              <el-option label="保密" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号:" prop="examinee_number">
            <el-input clearable :maxlength="20"  v-model="form.idcard" placeholder="请输入身份证号" />
          </el-form-item>
          <el-form-item label="手机号码:" prop="examinee_number">
            <el-input clearable :maxlength="20"  v-model="form.mobile" placeholder="请输入手机号码" />
          </el-form-item>
          
        </el-col>
        <el-col :sm="12">
          <el-form-item label="登录密码:" prop="password">
            <span>初始登录密码:123456</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from '@/components/uploadImage'
import regions from 'ele-admin/packages/regions';

export default {
  name: 'MemberEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: { uploadImage },
  data() {
    return {
      // 表单数据
      form: Object.assign({ status: 1, gender: 1 }, this.data),
      // 表单验证规则
      rules: {
        realname: [
          { required: true, message: '请输入考生姓名', trigger: 'blur' }
        ],
        idcard: [
          { required: true, message: '请输入考生身份证号', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        examinee_number: [
          { required: true, message: '请输入准考证号', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 考生等级列表
      memberLevelList: [],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {
          // 清空密码
          password: "",
        });
        // 取值赋予城市组件
        this.city = this.data.city;
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
        // 清空省市区控件
        this.city = [];
      }
    }
  },
  mounted() {
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 城市数据处理
          this.form = Object.assign({}, this.form, {
            city: this.city
          });
          this.$http.post('/member/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message({ type: 'success', message: res.data.msg });
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /**
     * 获取考生等级列表
     */
    getMemberLevelList() {
      this.$http.get('/memberlevel/getMemberLevelList').then(res => {
        if (res.data.code === 0) {
          this.memberLevelList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style scoped></style>
